<template>
<div class="cart_box">
    <van-checkbox-group v-model="result">
        <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="danxuan"
        >
            <van-card
                :num="item.number"
                :price="item.retail_price"
                :title="item.goods_name"
                :thumb="item.list_pic_url"
            />
        </van-checkbox>
        </van-checkbox-group>
        <!-- 全选栏 -->
        <van-submit-bar
        :price="totalPriceFn"
        button-text="提交订单"
        @submit="onSubmit"
        >
            <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送,
                <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
</div>
</template>

<script>
import { cartList } from "@/http/http";
export default {
    data() {
        return {
            cartList: [],
            result: [],
            checked: false,
            pricetotal: 0,
        };
    },
    computed: {
        totalPriceFn() {
            this.pricetotal = 0;
            this.result.forEach((item) => {
                this.pricetotal += item.number * itme.retail_price * 100;
            });
            return this.pricetotal;
        },
    },
    created() {
        cartList().then((res) => {
            this.cartList = res.data.data.cartList;
            console.log(this.cartList);
        });
    },
    methods: {
        onsubmit() {
            //
        },
        onClickEditAddress() {

        },
        checkAll() {
            if (this.checked) {
                this.result = this.cartList;
            }else {
                this.result = [];
            }
        },
        danxuan() {
            console.log(this.result);
            if (this.result.length == this.cartList.length) {
                this.checked = ture;
            } else {
                this.checked = false;
            }
        }
    },
};
</script>

<style scoped lang='less'>
.cart_box {
    display: flex;
    padding-bottom: 140px;
    box-sizing: border-box;
    justify-content: space-between;
    .van-checkbox-group {
        width: 100%;
        .van-checkbox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            /deep/.van-checkbox__label {
                flex:1;
            }
        }
    }
    .van-submit-bar {
        bottom: 50px;
    }
}
</style>
